<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="theme-color" content="#394b59" />
        <meta
            name="description"
            content="Lightdash - Explore and visualize your team's analytics and metrics."
        />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
        <!--
          manifest.json provides metadata used when your web app is installed on a
          user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
        -->
        <link rel="manifest" href="/manifest.json" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
            rel="stylesheet"
        />

        <title>Lightdash</title>
        <script type="module">
            if (import.meta.env.DEV && REACT_GRAB_ENABLED) {
                import('react-grab')
                    .then(() => console.log('[React Grab] Loaded'))
                    .catch((e) =>
                        console.error('[React Grab] Failed to load:', e),
                    );
                import('@react-grab/claude-code/client')
                    .then(() => console.log('[Claude Code Client] Loaded'))
                    .catch((e) =>
                        console.error(
                            '[Claude Code Client] Failed to load:',
                            e,
                        ),
                    );
            }
        </script>
    </head>
    <body data-color-mode="light">
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>

        <script type="module" src="/src/index.tsx"></script>
    </body>
</html>
